/* 商品活动 */
<template>
  <div class="app-containers">
    <query-table-render
        ref="queryTable"
        :query-model="queryModel"
        :table-request="requestTableData"
        :table-column="tableColumns"
        :toolbar-render="toolbarRnd"
        :transform-query="transformQuery"
        :title-render="titleRender"
        @on-operator="onOperator"
    >
      <template v-slot:form>
        <el-form-item label="活动名称" prop="name">
          <el-input v-model="queryModel.name" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="活动编号" prop="code">
          <el-input v-model="queryModel.code" placeholder="请输入" clearable/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryModel.status" placeholder="请选择" style="width:100%" clearable>
            <el-option
                v-for="item in dict.type.order_class_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="生效日期" prop="effectiveTimeRange" :autoAlign="true">
          <el-date-picker
              v-model="queryModel.effectiveTimeRange"
              type="daterange"
              format="yyyy/MM/dd"
              value-format="yyyy-MM-dd"
              range-separator="-"
              style="width:100%"
              start-placeholder="开始时间"
              end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" prop="failureTimeRange" :autoAlign="true">
          <el-date-picker
              v-model="queryModel.failureTimeRange"
              type="daterange"
              format="yyyy/MM/dd"
              range-separator="-"
              style="width:100%"
              value-format="yyyy-MM-dd"
              start-placeholder="开始时间"
              end-placeholder="结束时间">
          </el-date-picker>
        </el-form-item>
      </template>
    </query-table-render>
  </div>
</template>

<script>
import QueryTableRender from "@/components/QueryTableRender";
import {listGoodsActivity} from '@/api/basic/activity'
import {checkPermi} from '@/utils/permission.js'
import dayjs from "dayjs"

export default {
  name: "CommodityActivity",
  components: {QueryTableRender},
  dicts: ['order_class_status', 'goods_activity_type'], // 可配置价目表
  data() {
    return {
      btnLoad: false, // 点击确认按钮后 旋转轮
      btnOrderTypeLoad: false, // 修改订单类型确认按钮
      defaultProps: {
        children: "children",
        label: "name"
      },
      orderTypeShow: false, // 是否显示修改订单类型弹窗
      filterText: '', // 搜索价目表
      settingSourcePrices: [], // 所有可配置的价目表数据 原始数据
      settingPriceList: [], // 所有可配置的价目表数据
      checkedSettingPrices: [], // 可用的价目表数据
      queryModel: {
        name:'', //活动名称
        code:'', //活动编号
        status:'', //状态
        effectiveTimeRange:'', //生效日期
        failureTimeRange:'', //失效日期
      },
      editVisible: false,
      curRecord: {}, // 当前记录
      customerValue: [], //  价目数据
      customerData: [],
      tableColumns: [
        {
          label: '序号',
          width: '60',
          type: 'index',
          increment: true
        },
        {
          prop: 'code',
          label: '活动编号',
          minWidth: '200',
          showOverflowTooltip: true
        },
        {
          prop: 'name',
          label: '活动名称',
          width: '180',
          showOverflowTooltip: true
        },
        {
          prop: 'type',
          label: '活动类型',
          align: 'left',
          minWidth: '140',
          render: (h, text) => {
            let show = ""; // DISTRIBUTION PURCHASE
            this.dict.type.goods_activity_type.some((item) => {
              if (item.value === text) {
                show = item.label;
                return true;
              }
            });
            return show;
          }
        },
        {
          prop: 'startDate',
          label: '生效日期',
          minWidth: '120',
          // render: (h, text) => {
          //   if (!text) return ''
          //   const dayjsData = dayjs(text)
          //   if (dayjsData.isValid() && dayjsData.isAfter(dayjs('1900'), 'year')) {
          //     return dayjsData.format('YYYY-MM-DD')
          //   }
          //   return text
          // }
        },
        {
          prop: 'endDate',
          label: '失效日期',
          minWidth: '120',
          // render: (h, text) => {
          //   if (!text) return ''
          //   const dayjsData = dayjs(text)
          //   if (dayjsData.isValid() && dayjsData.isAfter(dayjs('1900'), 'year')) {
          //     return dayjsData.format('YYYY-MM-DD'); // format('YYYY-MM-DD HH:mm:ss')
          //   }
          //   return text
          // }
        },
        {
          prop: 'status',
          label: '状态',
          minWidth: '80',
          type:'select',
          valueEnum: {
              'ENABLE': { text: '启用' },
              'DISABLE': { text: '禁用' },
          }
        },
        {
          prop: 'activityDesc',
          label: '活动说明',
          minWidth: '180',
          showOverflowTooltip: true
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: '180',
          showOverflowTooltip: true
        },
        {
          label: '操作',
          width: '120',
          type: 'operator',
          fixed: 'right',
          operators: this.operatorsFunc()
          //  [
          //   {label: '修改', command: 'edit'},
          //   {label: '详情', command: 'check'}
          // ]
        },
      ]
    }
  },
  beforeRouteEnter(to, from, next){
    console.log(to)
    next(vm => {
      vm.activityId = to?.query?.activityId
    })
  },
  beforeRouteLeave(to, from, next){
    // this.refreshFlag = false
    return next()
  },
  created() {},
  mounted() {},
  watch: {
    $route() {
        // location.reload();
        this.onRefreshTable();
    },
  },
  methods: {

    /**
     * 渲染功能列表
     * @param {*} h 
     */
    toolbarRnd(h){
      // return <el-button type="primary" icon="el-icon-plus" vOn:click={() => this.onAddCost() }>新增活动</el-button>
      let list = [];
      if (checkPermi(['basic-data:goods-activity:add'])) {
        list.push(<el-button type="primary" icon="el-icon-plus" size="small" vOn:click={() => this.onAddCost()}>新增活动</el-button>);
      }
      return list;
    },

    /**
     * 操作列表
     */
    operatorsFunc() {
      let list = [];
      if (checkPermi(['basic-data:goods-activity:edit'])) {
        list.push({label: '修改', command: 'edit'});
      }
      if(checkPermi(['basic-data:goods-activity:query'])){
        list.push({label: '详情', command: 'check', })
      }
      return list;
    },

    /**
     * 标题渲染
     * @param {*} h 
     */
    titleRender(h) {
      return <div>
        <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
        <span style="display: inline-block; color: #333333; font-size: 16px;">商品活动</span>
      </div>;
    },

    /**
     * 修改参数格式
     * @param {*} queryData 
     */
    transformQuery(queryData) {
      console.log(queryData)
      let transParams = {}
      for (let keyName in queryData) {
        if (queryData.hasOwnProperty(keyName)) {
          if (keyName === 'effectiveTimeRange') {
            if(queryData['effectiveTimeRange'] && queryData['effectiveTimeRange'].length){
              const [start, end] =  queryData[keyName]
              transParams['effectiveStartDate'] = start
              transParams['effectiveEndDate'] = end
            }
          }else if (keyName === 'failureTimeRange') {
            if(queryData['failureTimeRange'] && queryData['failureTimeRange'].length){
              const [start, end] =  queryData[keyName]
              transParams['expireStartDate'] = start
              transParams['expireEndDate'] = end
            }
          } else {
            transParams[keyName] = queryData[keyName]
          }
        }
      }
      return transParams
    },

    /**
     * 操作页面
     * @param {*} command 
     * @param {*} record 
     */
    onOperator(command, record) {
      if('edit' === command){
        this.onPreviewInvoice(record)
      }else if('check' === command){
        this.checkInfo(record)
      }
    },
    //新增
    onAddCost(){
      this.$router.push({path:"CommodityActivityAdd"});
    },
    //编辑
    onPreviewInvoice(record) {
      console.log(record)
      this.$router.push({path:"CommodityActivityEdit",query:{activityId:JSON.stringify(record.id)}});
    },
    //详情
    checkInfo(record) {
      this.$router.push({path:"CommodityActivityDetail",query:{activityId:JSON.stringify(record.id)}});
    },

    /**
     * 获取数据
     * @param {*} queryParams 
     */
    requestTableData(queryParams) {
      return listGoodsActivity(queryParams).then(respData => {
          return {
            success: true,
            total: respData.data.total,
            data: respData.data.records,
          }
        }
      );
    },

    /**
     * 刷新列表
     */
    onRefreshTable(){
      this.$refs['queryTable'].refreshTable()
    },
  }
}
</script>


<style lang="scss" scoped>

</style>